<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JSONP模式获取腾讯天气接口信息</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/template-web.js"></script>
    <script src="js/ajax.js"></script>
    <style type="text/css">
        .container {
            padding-top: 60px;
        }
    </style>
</head>

<body>
    <div class="container">
        <table class="table table-striped table-hover" align="center" id="box"></table>
    </div>
    <script type="text/html" id="tpl1">
            <tr>
                <th>时间</th>
                <th>温度</th>
                <th>天气</th>
                <th>风向</th>
            </tr>
            {{each infos}}
            <tr>
                <td>{{dateFormat($value.update_time)}}</td>
                <td>{{$value.degree}}</td>
                <td>{{$value.weather}}</td>
                <td>{{$value.wind_direction}}</td>
            </tr>
            {{/each}}
    </script>

    <script>
        /* 
                指定自己想要的时间格式
            */
        function dateFormat(date) {
            const year = date.substr(0, 4);
            const month = date.substr(4, 2);
            const day = date.substr(6, 2);
            const hour = date.substr(8, 2);
            const minute = date.substr(10, 2);
            const seconds = date.substr(12, 2);
            return year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + seconds + '秒';
        }

        // 在模板中引入外部函数
        /* 
            将返回的数据update_time（20221205150000） 都经过dateFormat函数进行处理
            将dateFormat函数导入到模板中。
        */
        template.defaults.imports.dateFormat = dateFormat;


        // 获取数据
        const tableObj = document.querySelector("#box");
        jsonp({
            funcname: 'func11',
            url: 'https://wis.qq.com/weather/common',
            data: {
                source: 'pc',
                weather_type: 'forecast_1h|forecast_24h',
                province: '河北省',
                city: '石家庄市'
            },
            success: function (data) {
                console.log(data);
                if (data.status == 200) {
                    // 渲染数据
                    const trs = template('tpl1', { infos: data.data.forecast_1h });
                    tableObj.innerHTML = trs;
                }
            }
        });
    </script>

</body>

</html> -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用JSONP模式获取腾讯天气接口信息</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/template-web.js"></script>
    <script src="js/ajax.js"></script>
    <style type="text/css">
        .container {
            padding-top: 60px;
        }
    </style>
</head>

<body>
    <div class="container">
        <table class="table table-striped table-hover" align="center" id="box"></table>
    </div>
    <script type="text/html" id="tpl1">
            <tr>
                <th>时间</th>
                <th>温度</th>
                <th>天气</th>
                <th>风向</th>
            </tr>
            {{each infos}}
            <tr>
                <td>{{dateFormat($value.update_time)}}</td>
                <td>{{$value.degree}}</td>
                <td>{{$value.weather}}</td>
                <td>{{$value.wind_direction}}</td>
            </tr>
            {{/each}}
        </script>

    <script>
        /* 
            指定自己想要的时间格式
        */
        function dateFormat(date) {
            const year = date.substr(0, 4);
            const month = date.substr(4, 2);
            const day = date.substr(6, 2);
            const hour = date.substr(8, 2);
            const minute = date.substr(10, 2);
            const seconds = date.substr(12, 2);
            return year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + seconds + '秒';
        }

        // 在模板中引入外部函数
        /* 
            将返回的数据update_time（20221205150000） 都经过dateFormat函数进行处理
            将dateFormat函数导入到模板中。
        */
        template.defaults.imports.dateFormat = dateFormat;


        // 获取数据
        /* 
            https://wis.qq.com/weather/common?source=pc&weather_type=forecast_1h|forecast_24h&province=湖北省&city=武汉市
            {"data":{"forecast_1h":{"0":{"degree":"7","update_time":"20221205150000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"北风","wind_power":"3"},"1":{"degree":"7","update_time":"20221205160000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"北风","wind_power":"3"},"10":{"degree":"2","update_time":"20221206010000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"东风","wind_power":"3"},"11":{"degree":"2","update_time":"20221206020000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"东风","wind_power":"3"},"12":{"degree":"3","update_time":"20221206030000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"南风","wind_power":"3"},"13":{"degree":"3","update_time":"20221206040000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"西风","wind_power":"3"},"14":{"degree":"3","update_time":"20221206050000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"北风","wind_power":"3"},"15":{"degree":"4","update_time":"20221206060000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"西风","wind_power":"3"},"16":{"degree":"5","update_time":"20221206070000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东南风","wind_power":"3"},"17":{"degree":"6","update_time":"20221206080000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东北风","wind_power":"3"},"18":{"degree":"6","update_time":"20221206090000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东北风","wind_power":"3"},"19":{"degree":"5","update_time":"20221206100000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东风","wind_power":"3"},"2":{"degree":"7","update_time":"20221205170000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"北风","wind_power":"3"},"20":{"degree":"5","update_time":"20221206110000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"东风","wind_power":"3"},"21":{"degree":"8","update_time":"20221206120000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"东风","wind_power":"3"},"22":{"degree":"8","update_time":"20221206130000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"东风","wind_power":"3"},"23":{"degree":"8","update_time":"20221206140000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东风","wind_power":"3"},"24":{"degree":"9","update_time":"20221206150000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东风","wind_power":"3"},"25":{"degree":"9","update_time":"20221206160000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东风","wind_power":"3"},"26":{"degree":"10","update_time":"20221206170000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东风","wind_power":"3"},"27":{"degree":"9","update_time":"20221206180000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东风","wind_power":"3"},"28":{"degree":"8","update_time":"20221206190000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东风","wind_power":"3"},"29":{"degree":"7","update_time":"20221206200000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东北风","wind_power":"3"},"3":{"degree":"6","update_time":"20221205180000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东北风","wind_power":"3"},"30":{"degree":"6","update_time":"20221206210000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东南风","wind_power":"3"},"31":{"degree":"6","update_time":"20221206220000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"西风","wind_power":"3"},"32":{"degree":"5","update_time":"20221206230000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"北风","wind_power":"3"},"33":{"degree":"5","update_time":"20221207000000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"西南风","wind_power":"3"},"34":{"degree":"4","update_time":"20221207010000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东南风","wind_power":"3"},"35":{"degree":"4","update_time":"20221207020000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东北风","wind_power":"3"},"36":{"degree":"4","update_time":"20221207030000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东北风","wind_power":"3"},"37":{"degree":"4","update_time":"20221207040000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东北风","wind_power":"3"},"38":{"degree":"4","update_time":"20221207050000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东北风","wind_power":"3"},"39":{"degree":"3","update_time":"20221207060000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东南风","wind_power":"3"},"4":{"degree":"5","update_time":"20221205190000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东北风","wind_power":"3"},"40":{"degree":"3","update_time":"20221207070000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"西风","wind_power":"3"},"41":{"degree":"3","update_time":"20221207080000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"北风","wind_power":"3"},"42":{"degree":"6","update_time":"20221207090000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"西南风","wind_power":"3"},"43":{"degree":"8","update_time":"20221207100000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东南风","wind_power":"3"},"44":{"degree":"10","update_time":"20221207110000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"北风","wind_power":"3"},"45":{"degree":"10","update_time":"20221207120000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"北风","wind_power":"3"},"46":{"degree":"10","update_time":"20221207130000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东北风","wind_power":"3"},"47":{"degree":"11","update_time":"20221207140000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东北风","wind_power":"3"},"5":{"degree":"4","update_time":"20221205200000","weather":"阴","weather_code":"02","weather_short":"阴","wind_direction":"东北风","wind_power":"3"},"6":{"degree":"3","update_time":"20221205210000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东北风","wind_power":"3"},"7":{"degree":"3","update_time":"20221205220000","weather":"多云","weather_code":"01","weather_short":"多云","wind_direction":"东北风","wind_power":"3"},"8":{"degree":"2","update_time":"20221205230000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"东北风","wind_power":"3"},"9":{"degree":"2","update_time":"20221206000000","weather":"晴","weather_code":"00","weather_short":"晴","wind_direction":"东风","wind_power":"3"}}},"message":"OK","status":200}
        */
        const tableObj = document.querySelector("#box");
        jsonp({
            funcname: 'func11',
            url: 'https://wis.qq.com/weather/common',
            data: {
                source: 'pc',
                weather_type: 'forecast_1h|forecast_24h',
                province: '湖北省',
                city: '武汉市'
            },
            success: function (data) {
                console.log(data);
                if (data.status == 200) {
                    // 渲染数据
                    const trs = template('tpl1', { infos: data.data.forecast_1h });
                    console.log(trs);
                    tableObj.innerHTML = trs;
                }
            }
        });

    </script>
</body>

</html>